<template>
<div>
    <div class="recordheader" ref="header">
        <div class="record_header_pensonal">
            <img src="../assets/man.png" alt="" @click="goto()">
        </div>
        <div class="record_list_filter">
            <div @click="alllist()" :class=" inchoose ? 'allactive': ''">
                全部
                <!-- <img src="../assets/arrow_down.png" alt="" class="record_list_filter_img1"> -->
            </div>
            <div class="record_list_filter_block" @click="choose()">
                筛选
                <img src="../assets/filter_flag.png" alt="" class="record_list_filter_img2">
            </div>
        </div>
    </div>
    <mt-popup v-model="popupVisible" position="right">
        <div :style="{height:fullHeight}">
            <div class="kindbox" >
                <div class="kindbox_title">类型</div>
                <ul class="kindbox_list">
                    <li :class="{inactive:cateIdArr.includes(item.cate_id)}" v-for="(item,index) in catelist" :key="index" @click="selectCate(item.cate_id)">{{item.title}}</li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="kindbox">
                <div class="kindbox_title">折扣</div>
                <ul class="kindbox_list discount_list">
                    <li :class="{inactive:discountTitle == item.title}" v-for="(item,index) in discount" :key="index" @click="selectDiscount(item.title)">
                        {{item.title == 9 ? item.title + '折以上' : item.title + '折'}}
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="kindbox" >
                <div class="kindbox_title">位置</div>
                <ul class="kindbox_list">
                    <li :class="{inactive:areaArr.includes(item.area_id)}" v-for="(item,index) in addressList" :key="index" @click="selectAdress(item.area_id)">{{item.area}}</li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="kindbox_btn">
                <button class="kindbox_reset_btn public_kindbox_btn" @click="reset">重置</button>
                <button class="kindbox_sure_btn public_kindbox_btn" @click="submitCate">确定</button>
            </div>
        </div>
    </mt-popup>
    <div class="record_body" :style="{minHeight:bodyHeight}">
        <mt-loadmore :autoFill="isAutoFill" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
            <div class="record_body_list" v-for="(item,index) in list" :key="index" @click="detail(item.merid)">
                <div class="record_body_list_title">
                    <img src="../assets/recordList_icon1.png" alt="" class="record_body_list_icon1">
                    {{item.mer_name}}
                    <img src="../assets/arrow_right.png" alt="" class="record_body_list_icon2">
                </div>
                <div class="record_body_list_avatar">
                    <img :src="item.mer_img" alt="">
                </div>
                <div class="record_body_list_info">
                    <div class="record_body_list_info_line">
                        <span class="record_body_list_info_line_f1">类型:</span>{{item.cate_name}}
                    </div>
                    <div class="record_body_list_info_line">
                        <span class="record_body_list_info_line_f1">时间:</span>{{item.time}}
                    </div>
                    <div class="record_body_list_info_line">
                        <span class="record_body_list_info_line_f1">地址:</span>{{item.mer_address}}
                    </div>
                    <div class="record_body_list_info_line">
                        <span class="record_body_list_info_line_f2">{{item.discount}} <font v-show=" item.discount !=null ">折</font></span>
                    </div>
                </div>
            </div>
            <div v-show="nodataShow" class="list_nodata">{{nodata}}</div>
        </mt-loadmore>
        <div class="recoder_tel" ref="footer">客服电话：0471-888666</div>
    </div>
</div>
</template>
<script>
import cookie from '../../store/modules/cookie'
import common from '../../store/modules/common.js'
export default {
    data(){
        return{
            popupVisible:false,
            fullHeight:0,
            bodyHeight:0,
            allLoaded:false,
            isAutoFill: false,
            list: [],
            catelist:[],
            memid:0,
            nodataShow:false,
            nodata:"",
            page:1,
            limit: 10,
            cateId: '',
            cateIdArr: [],
            discountSelect: [],
            discountTitle: null,
            discount: [
                {
                    id: 1,
                    title: '1~2'
                },
                {
                    id: 2,
                    title: '2~3'
                },
                {
                    id: 3,
                    title: '3~4'
                },
                {
                    id: 4,
                    title: '4~5'
                },
                {
                    id: 5,
                    title: '5~6'
                },
                {
                    id: 6,
                    title: '6~7'
                },
                {
                    id: 7,
                    title: '7~8'
                },
                {
                    id: 8,
                    title: '8~9'
                },
                {
                    id: 9,
                    title: '9~10'
                },
            ],
            areaId: null,
            areaArr:[],
            addressList: [],
            inchoose:false
        }
    },
    mounted() {
        let headerHeight = this.$refs.header.offsetHeight
        this.bodyHeight = (document.documentElement.clientHeight-headerHeight)+"px";
        this.fullHeight = document.documentElement.clientHeight+"px";
    },
    created () {
        this.memid = this.$route.query.memid        
        this.getcate()
        this.getdata(this.memid, this.page, this.limit, this.cateId, this.discountSelect, this.areaId)
    },
    methods:{
        // 类型
        selectCate(cid){
            if (this.cateIdArr.includes(cid)) {
				this.cateIdArr = this.cateIdArr.filter(function (ele){ return ele != cid; });
			} else {
                this.cateIdArr.push(cid);
            }
        },
        // 折扣
        selectDiscount (title) {
            let that = this;
            that.discountTitle = title;
            that.discountSelect = title.split('~');
        },
        // 地址
        selectAdress (id) {
            // let that = this;
            // that.areaId = id
            if (this.areaArr.includes(id)) {
				this.areaArr = this.areaArr.filter(function (ele){ return ele != id; });
			} else {
                this.areaArr.push(id);
            }
        },
        // 筛选确定
        submitCate(){
            this.inchoose = false
            this.cateId = this.cateIdArr.join(',')
            this.areaId = this.areaArr.join(',')
            this.popupVisible = false
            this.page = 1
            this.getdata(this.memid, this.page, this.limit, this.cateId, this.discountSelect, this.areaId)
        },
        alllist(){
            this.inchoose = true
            this.page = 1
            this.getdata(this.memid, this.page, this.limit)
        },
        choose(){
            this.popupVisible = true
        },
        goto(){
            this.$router.push({
                path:'/my'
            })
        },
        // 重置
        reset () {
            let that = this
            that.areaId = ""
            that.areaArr = []
            that.discountSelect = ""
            that.discountTitle =""
            that.cateIdArr = []
        },
        //获取分类
        getcate(){
            let that = this;
            this.$http.post('user/verification/screenverf', {memid: this.memid}).then((res)=>{
                if(res.code == 0){
                    that.catelist = res.data.title;
                    that.addressList = res.data.area;
                }else{
                    this.$messagebox(res.msg)
                }
            })
        },
        //获取列表
        getdata(memid, page, limit, cate_id, discount, area_id){
            let that = this
            let data = {
                memid: memid,
                page: page,
                limit: limit,
                cate_id: cate_id,
                discount: discount,
                area_id: area_id
            }
            that.$http.post('user/verification/memberverf', data).then((res)=>{
                if(res.code == 0){ 
                    for(var i=0; i<res.data.length;i++){
                        if(res.data[i].mer_img){
                            res.data[i].mer_img = common.state.baseUrl + res.data[i].mer_img.split(',')[0]
                        }
                    } 
                    that.nodataShow = false                 
                    if(that.page == 1){
                        that.list = res.data
                    }else{
                        if(res.data.length <that.limit){
                            that.allLoaded = true                            
                        }
                        that.list = that.list.concat(res.data)                            
                    } 
                }else{
                    if(that.page == 1){
                        that.list = []
                    }
                    that.nodataShow = true
                    that.nodata = res.msg
                    that.allLoaded = true
                }
            }).catch((res)=>{

            })
        },
        loadTop() {
            let that = this;
            that.page = 1;
            that.getdata(this.memid, this.page, this.limit, this.cateId, this.discountSelect, this.areaId)
            that.$refs.loadmore.onTopLoaded();
        },
        loadBottom() {
            let that = this
            that.page++
            that.getdata(this.memid, this.page, this.limit, this.cateId, this.discountSelect, this.areaId)
            this.$refs.loadmore.onBottomLoaded();
        },
        //跳转详情
        detail (id) {
            this.$router.push({
                path: '/detail',
                query: {
                    merid: id
                }
            })
        },
    }
}
</script>
<style scoped>
.recordheader{
    background: url('../assets/recordHeader.jpg') no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 307px;
    padding: 0;
    box-sizing: border-box;
    position: fixed;
    top: 0;
}
.record_header_pensonal{
    text-align: right;
    padding: 49px 48px 49px 0;
}
.record_header_pensonal img{
    width: 74px;
    height: 74px;
}
.record_list_filter{
    background: #fff;
    height: 112px;
    display: flex;
    justify-content: center;
    padding: 29px 0;
    box-sizing: border-box;
    font-size: 38px;
    color: #231815;
}
.record_list_filter div{
    flex: 0 0 50%;
    text-align: center;
}
.record_list_filter_img1{
    width: 23px;
    height: 12px;
    vertical-align: middle;
}
.record_list_filter_img2{
    width: 34px;
    height: 30px;
}
.record_list_filter_block{
    border-left: 1px solid #918b8a;
}
.record_body{
    background: #EAECED;
    padding:29px 24px;
    margin-top: 307px;
    overflow: scroll;
}
.record_body_list{
    background: #fff;
    padding: 48px 53px;
    margin-bottom: 28px;
    border-radius: 5px;
    display: flex;
    flex-wrap:wrap;
}
.record_body_list_title{
    font-size:42px ;
    color: #231815;
    flex: 0 0 100%;
    /* height: 55px; */
}
.record_body_list_icon1{
    width: 39px;
    height: 45px;
    padding-top: 10px;
}
.record_body_list_icon2{
    width: 12px;
    height: 23px;
}
.record_body_list_avatar{
    flex: 0 0 22%;
    height: 162px;
    margin-top: 27px;
}
.record_body_list_avatar img{
    width: 100%;
    height: 100%;
}
.record_body_list_info{
    flex: 0 0 78%;
    width: 78%;
    margin-top: 27px;
    padding-left: 48px
}
.record_body_list_info_line{
    height: 48px;
    line-height: 48px;
    font-size: 36px;
    color: #2D2D2D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record_body_list_info_line_f1{
    color: #A1A0A0;
    letter-spacing: 2px;
}
.record_body_list_info_line_f2{
    color: #22CFB6;
    border: 1px solid #22CFB6;
    border-radius: 5px;
    padding:0px  5px;
}
.recoder_tel{
    color: #000;
    font-size:30px ;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 56px;
    line-height: 56px;
    background: #EAECED;
    z-index: 99;
}
.kindbox{
    width: 792px;
    padding: 48px 44px;
}
.kindbox_title{
    color: #A1A0A0;
    font-size: 36px;
    text-align: left;
    margin-bottom: 20px;
}
.kindbox_list{
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.kindbox_list li{
    list-style-type: none;
    flex:0 0 30%;
    background: #F8F8F8;
    text-align: center;
    /* padding: 0 25px; */
    color: #666666;
    font-size: 36px;
    height: 81px;
    line-height: 81px;
    margin-bottom: 21px;
}
.discount_list li{
    margin-right: 0;
    margin-left: 0
}
.kindbox_btn{
    text-align: right;
    padding: 0rem 96px;
}
.kindbox_btn .kindbox_sure_btn{
    background: #22CFB6;
}
.public_kindbox_btn{
    border: none;
    padding: 22px 108px;
    margin: 144px auto;
    color: #231815;
}
.kindbox_reset_btn{
    background: orange;
}
.list_nodata{
    text-align: center;
    padding: 48px 0;
    font-size:36px;
}
li.inactive{
    background: #22CFB6;
    color: #231815;
}
.allactive{
    color: #22CFB6;
}
</style>